<?php
	$demo = $_GET["demo"];
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>Beyond The Game</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script language="javascript" src="../tdl/base.js"></script>
		<script language="javascript" src="../jquery.min.js"></script>
		<!-- qtre -->
		<script language="javascript" src="../qtre/core.js"></script>
		<script language="javascript" src="../qtre/input.js"></script>
		<script language="javascript" src="../qtre/camera.js"></script>
		<script language="javascript" src="../qtre/material.js"></script>
		<script language="javascript" src="../qtre/renderable.js"></script>
		<script language="javascript" src="../qtre/sceneManager.js"></script>
		<script language="javascript" src="../qtre/sceneNode.js"></script>
		<script language="javascript" src="../qtre/colladaloader.js"></script>
		<script language="javascript" src="../qtre/postProcessing.js"></script>
		<script language="javascript" src="../qtre/ui.js"></script>
		<script language="javascript" src="../qtre/helper.js"></script>
		<!-- cufon -->
		<script src="../lib/cufon/cufon-yui.js" type="text/javascript"></script>
		<script type="text/javascript" src="../lib/cufon/Note_this_400.font.js"></script>
		<!--jquery ui-->
		<script src="../lib/jquery-ui/jquery-ui-1.8.9.custom.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../lib/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css"/>

		<script language="javascript" src="<?php echo $demo;?>.js"></script>

		<link rel="stylesheet" type="text/css" href="../main.css"/>
		
		<script language="javascript">
			tdl.require("tdl.buffers");
			tdl.require("tdl.fast");
			tdl.require("tdl.framebuffers");
			tdl.require("tdl.log");
			tdl.require("tdl.math");
			tdl.require("tdl.quaternions");
			tdl.require("tdl.particles");
			tdl.require("tdl.primitives");
			tdl.require("tdl.programs");
			tdl.require("tdl.textures");
			tdl.require("tdl.webgl");
			tdl.require("tdl.io");

			var g_demo = <?php echo $demo;?>;
			g_demo.params = {};
			
			$(document).ready(function(){

				var canvas = document.getElementById("mainView");
				gl = qtre.core.initialize(canvas);
				g_demo();

				function render(){
					qtre.sceneManager.flush();
					tdl.webgl.requestAnimationFrame(render, qtre.core.canvas);
				}
				render();

				initUI();

				Cufon.replace("h1", {
					textShadow: '0px 1px #ddd',
					fontSize : "26px"
				});
			})

			function initUI()
			{
				initPlayer();

				for(var param in g_demo.params){
					var value = g_demo.params[param].value;
					var materials = g_demo.params[param].materials;
					var slider = new qtre.ui.slider({
						"min" : 0,
						"max" : value*10,
						"step" : value/20,
						"value" : value
					})
					for(var i = 0; i < materials.length; i++){
						slider.bindParam(qtre.sceneManager.getMaterial(materials[i]), param);
					}
					$("#adjustPanel").append("<h4>"+param+":</h4>")
					$("#adjustPanel").append(slider.instance);
				}
				$("#adjustPanel").append("<br />")
			}

			function initPlayer()
			{
				var player = $("#track");
				player.css("left", $(document.body).width())
				player.css("top", $(document.body).height() - 100);
				player.animate({
					"left" : "-=300"
				}, 1000)

				nextMusic();
				$("#track audio").bind("ended", function(){
					nextMusic();
				})
			}

			function nextMusic(){
				$.post("../proxy.php?url=http://www.qsc.zju.edu.cn/apps/bubble/api/?action=get_music", {"user_id": 2955}, function(json){
					var jsonObj = eval("(" + json + ")");
					var music = jsonObj[0];
					music_id = music["music_id"];
					var audio = $("#track audio");
			//		audio.attr("src", music["url"]);
					$("#track .title").html(music["title"]);
					musicNow = music;
				})
			}

			function pushParams(params){
				for(var name in params){
					g_demo.params[name] = {
						"value" : params[name].value,
						"materials" : params[name].materials
					}
				}
			}
		</script>
	</head>
	<body style="width:100%; height: 100%; margin: 0px">
		<h1>Beyond The Game</h1>
		<canvas id="mainView" style="width:100%; height: 100%"></canvas>
		<div id="categories">
			<ul>
			</ul>
		</div>
		<div id="adjustPanel">

		</div>
		<div id="track">
			<div class="info">
				<h2>TRACK</h2>
				<span class="title"></span>
			</div>
			<img src="../images/bubble-logo.png" class="logo"/>
			<audio autoplay="true" controls="true" >
		</div>
		<?php
			//include shader file
			if(file_exists("$demo.html")){
				include("$demo.html");
			}
		?>

	</body>
</html>
